<template>
  <div class="menu" :style="auto_height">
      <div class="menu_bar_fa" :style="menu_img_fa_style">
        <img @click="controlMenu" :style="menu_img_style" class="menu_bar" src="@/assets/imgs/menu.png" alt="">
      </div>
<el-menu router default-active="1" class="el-menu-vertical-demo" :collapse="isCollapse">
  <!-- <el-submenu index="1">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span slot="title">导航一</span>
    </template>
  </el-submenu> -->
  <el-menu-item index="/index/user">
    <i class="el-icon-menu"></i>
    <span slot="title">用户管理</span>
  </el-menu-item>
  <el-menu-item index="/index/tag">
    <i class="el-icon-menu"></i>
    <span slot="title">标签管理</span>
  </el-menu-item>
  <el-menu-item index="3">
    <i class="el-icon-document"></i>
    <span slot="title">导航三</span>
  </el-menu-item>
  <el-menu-item index="4">
    <i class="el-icon-setting"></i>
    <span slot="title">导航四</span>
  </el-menu-item>
</el-menu>
  </div>
</template>

<script>
export default {
  name:"menus",
  data() {
    return {
     isCollapse: false,
     auto_height:{
      "height":"auto"
     },
     menu_img_style:{
        "transform":"rotate(0deg)"
     },
     menu_img_fa_style:{
      "text-align": "right",
     }
    }
  },
  methods: {
    controlMenu(){
      if (this.isCollapse) {
        this.isCollapse = false
        this.menu_img_fa_style = {
          "text-align": "right",
        }
        this.menu_img_style = {
          "transform":"rotate(0deg)"
        }
      }else{
        this.isCollapse = true
        this.menu_img_fa_style = {
          "display": "flex",
          "align-items": "center",
          "justify-content": "center"
        }
        this.menu_img_style = {
          "transform":"rotate(180deg)"
        }
      }
    }
  },
  created(){
    var a = window.innerHeight
    this.auto_height = {
      "height":a - 60+'px'
    }
  }
};
</script>

<style lang="scss" scoped>
  .menu{
    display: block;
position: relative;
// overflow-y: scroll;
border-right: solid 1px #e6e6e6;
// background-color: #324157 !important;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 140px;
    min-height: 400px;
  }
  .menu_bar_fa{
    text-align: right;

  }
  .menu_bar{
    width: 30px;
    height: 30px;
    padding: 10px;
    cursor: pointer;
  }
  .el-menu{
    border-right:none !important;
  }
</style>


